<style lang="stylus">
.setting
  min-height 100%
  overflow hidden
  background-color #f7f7f7
  .item
    line-height 115px
</style>

<template lang="pug">
.setting
  title-bar(title="我的设置")
  .mgt-10
    .flex.item.bg-white.pdl-24.bdb(@click="onModifyPassword") 修改密码
    <!--.flex.item.bg-white.pdl-24.bdb 免责声明-->
    .flex.item.bg-white.pdl-24.pdr-32.bdb
      span 软件版本
      .flex-1
      .gray-99.fz-24 V{{version}}
    .flex.item.bg-white.pdl-24.bdb.pdr-32(@click="onClearCache")
      span 清理缓存
      .flex-1
      .gray-99.fz-24 {{cacheSize || '0MB'}}
    .item.bg-white.center.bdb.mgt-36(@click="onLogout") 退出登录
</template>

<script>
import TitleBar from '../components/TitleBar.vue'
import { CACHE_KEY } from '../const'

export default {
  name: 'setting',
  components: { TitleBar },

  data() {
    return {
      version: '0.0.0',
      cacheSize: ''
    }
  },

  mounted() {
    this.action('setting').then(({ version, cacheSize }) => {
      this.version = version
      this.cacheSize = cacheSize
    })
  },

  methods: {
    onModifyPassword() {
      this.$router.push({
        path: '/find-password',
        query: { type: 'modify' }
      })
    },

    onClearCache() {
      // 清除客户端缓存
      this.action('clearCache').then(() => {
        this.cacheSize = ''

        // 清除浏览器缓存
        Object.keys(CACHE_KEY).forEach(key => {
          this.clearStore(CACHE_KEY[key])
        })
        this.$toast('清理成功')
      })
    },

    onLogout() {
      this.clearStore('user')
      this.user = {}
      this.userId = ''
      if (this.config.env.isApp) {
        this.action('logout')
      } else {
        this.$router.replace('/home')
      }
    }
  }
}
</script>
